<template>
  <!--柱状图-->
  <div class="keep-columnar">
    <div id="echart2" class="account-display-echart" ref="histogramChart"></div>
    <div class="no-data">暂无数据</div>
  </div>
</template>

<script>
  export default {
    name: 'KeepColumnar',
    data () {
      return {
        initEchart: '',
        isData: false,
        option: {
          color: ['#40a9ff'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            width: '500px',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisTick: {
                alignWithLabel: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              minInterval: 1,
              max: 100
            }
          ],
          series: [
            {
              name: '活动裂变层级统计',
              type: 'bar',
              barWidth: '30%',
              data: []
            }
          ]

        }
      }
    },
    methods: {
      init (list) {
        this.isData = list.length !== 0
        this.formatData(list)
        this.initEchart = 'init'
        const histogramChart = window.echarts.init(this.$refs.histogramChart, 'walden')
        histogramChart.setOption(this.option)
      },
      formatData (list) {
        if (this.initEchart) {
          this.option.xAxis.data = []
          this.option.series[0].data = []
        }
        const axisList = []
        const tempList = []
        list.forEach(item => {
          axisList.push(item.name)
          tempList.push(item.keepRate)
        })
        this.option.xAxis[0].data = axisList
        this.option.series[0].data = tempList
      }
    }
  }
</script>

<style lang="less">
  .keep-columnar {
    padding: 0 20px;
    height: 340px;
    min-width: 600px;
    background: white;
    overflow: hidden;

    .histogram-fission-title {
      border-bottom: 1px solid #f0f0f0;
      padding: 15px 0;
    }

    .no-data {
      width: 600px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #909399;
    }

    .account-display-echart {
      width: 600px;
      min-height: 250px;
    }
  }
</style>
